<template>
  <q-item>
    <q-item-section>规格名称</q-item-section>
    <q-item-section side>{{ shelf.typeName }}</q-item-section>
  </q-item>
  <q-item>
    <q-item-section>货架层数</q-item-section>
    <q-item-section side>{{ shelf.level }}</q-item-section>
  </q-item>
  <q-item>
    <q-item-section>货架高度</q-item-section>
    <q-item-section side>{{ shelf.height }}</q-item-section>
  </q-item>
  <q-item>
    <q-item-section>货架深度</q-item-section>
    <q-item-section side>{{ shelf.depth }}</q-item-section>
  </q-item>
  <q-item>
    <q-item-section>抬升高度</q-item-section>
    <q-item-section side>{{ shelf.liftHeight }}</q-item-section>
  </q-item>
</template>

<script>
import { useAPIStore } from 'stores/api/index.js'
import { api } from 'boot/axios.js'
import { onMounted, ref } from 'vue'

export default {
  name: 'ForkCmdInfo',
  props: {
    shelfId: String,
    center: { type: Boolean, default: false }
  },
  setup (props) {
    const transportUrl = useAPIStore().transportUrl
    const orderUrl = useAPIStore().orderUrl
    const shelf = ref({})
    function getMapPose () {
      if (props.center) {
        api.get(orderUrl + 'shelf/id/' + props.shelfId).then(rs => {
          shelf.value = rs.data
        })
      } else {
        api.get(transportUrl + 'shelf/id/' + props.shelfId).then(rs => {
          shelf.value = rs.data
        })
      }
    }
    onMounted(getMapPose)

    return {
      shelf
    }
  }
}
</script>
